<template>
	<view>
		<view class="bind-mob">
			绑定手机号
		</view>
		<view class="mobile">
			<view class="mobile-text">
				手机号码
			</view>
			<view class="mobile-input">
				<input type="number" v-model="mylogin.phone" placeholder="请填写手机号码" />
			</view>
		</view>
		<view class="verificationCode">
			<view class="verificationCode-text">
				验证码
			</view>
			<view class="verificationCode-input">
				<input type="text" v-model="mylogin.verify" placeholder="请输入验证码" />
				<view @click="SendCode" :style="{backgroundColor:show?'#979ba8':'#077840'}" :class="show ?'gray':'sendCode'">
					<!-- 发送验证码 -->
					{{show?count+'s后重新发送':'发送验证码'}}
					<!-- <wyb-button class="btn" type="hollow" :count-down='true' :count-down-num='60'count-down-text=''>发送验证码</wyb-button> -->
				</view>

			</view>
		</view>
		<view class="tips">
			请输入准确手机号查看您的相关客户订单
		</view>
		<view class="login-btn">
			<button @click="myLogin">登录</button>

		</view>
	</view>
</template>

<script>
	import wybButton from '@/components/wyb-button/wyb-button.vue'
	export default {
		components: {
			wybButton
		},
		data() {
			return {
				time: '',
				show: false,
				count: '',
				timer: null,
				// mobile:'13121599932'
				mylogin: {
					reg_type: 'phone',
					phone: '',
					verify: '',
					session_id: ''
				},

			}
		},
		watch:{
			count:{
				handler(v){
					if(v <= 0){
						this.show = false;
					}else{
						this.show = true;
					}
				},
				immediate:true,
				deep:true
			}
		},
		// 获取手机号码
		onLoad() {

			// this.mylogin.phone=uni.getStorageSync('phone')
		},
		methods: {
			SendCode() {
				if(this.show){
					return;
				}
				if (!this.mylogin.phone) {
					this.tui.toast('请输入手机号码')
				} else if (!this.utils.isMobile(this.mylogin.phone)) {
					this.tui.toast('手机号有误,请重填!')
				} else {
					this.startCode()
					uni.showLoading({})
					this.api.verificationCode({
							mobile: this.mylogin.phone
						})
						.then(res => {
							uni.hideLoading()
							if (res.data.code === 1) {
								this.tui.toast('发送成功,请稍后!')
							} else if (res.data.code == 0) {
								this.tui.toast(res.data.msg)
							}

						}).catch(err => {
							uni.hideLoading()
						})

				}

			},
			startCode() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = true;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = false;
							clearInterval(this.timer);
							this.timer = null;
						}

					}, 1000)
				}
			},
			myLogin() {

				if (!this.mylogin.phone) {
					this.tui.toast('请输入手机号')
				} else if (!this.mylogin.verify) {

					this.tui.toast('请输入验证码')
				} else {
					uni.showLoading({})
					this.api.phoneLogin({
						mobile: this.mylogin.phone,
						verifyCode: this.mylogin.verify
					}).then(result => {

						const {
							code,
							data,
							msg

						} = result.data
						if (code === 1) {
							uni.hideLoading()
							//loginUserVo
							const {
								loginShopUserVo: user,
								token

							} = data
							uni.setStorageSync('uid', user.shopUserId)
							uni.setStorageSync('phone', user.userMobile)
							this.cacheHelper.setToken(token)
							uni.switchTab({
								url: '/pages/orderList/orderList'
							})

						} else {
							uni.hideLoading()
							this.tui.toast(msg)
						}

					})

				}

			}
		}
	}
</script>

<style lang="less" scoped>
	.bind-mob {
		height: 110rpx;
		width: 100%;
		line-height: 110rpx;
		color: #333333;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		background-color: #F9F9F9;
		margin-left: 30rpx;
	}

	.mobile {
		padding: 30rpx 0;
		box-sizing: border-box;
		width: 690rpx;
		margin: 0 auto;
		border-bottom: 2px solid #EEEEEE;

		.mobile-text {
			margin-bottom: 20rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.mobile-input input:placeholder {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.verificationCode {
		width: 690rpx;
		margin: 0 auto;
		padding: 30rpx 0;
		box-sizing: border-box;
		border-bottom: 2px solid #EEEEEE;

		.verificationCode-text {
			margin-bottom: 20rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.verificationCode-input {
			display: flex;
			justify-content: space-between;

			input:placeholder {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.sendCode {
				width: 150rpx;
				height: 60rpx;
				background: #077840;
				border-radius: 8rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
			}

		}
	}

	.tips {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		padding-top: 30rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.login-btn {
		width: 630rpx;
		height: 96rpx;

		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;

		line-height: 96px;
		margin-top: 60rpx;
		margin-left: 60rpx;

		button {
			background: #077840;
			color: #FFFFFF;
		}
	}

	.gray {
		font-size: 26rpx;
		background-color: #077840;
		width: 180rpx;
		height: 60rpx;
		border-radius: 8rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
	}
</style>